<template>
  <div>
    <!-- 面包屑导航 -->
    <el-breadcrumb separator-class="el-icon-arrow-right">
      <el-breadcrumb-item :to="{ path: '/home' }">首页</el-breadcrumb-item>
      <el-breadcrumb-item>用户管理</el-breadcrumb-item>
    </el-breadcrumb>
    <!-- 卡片视图 -->
    <el-card class="box-card">
      <!-- 搜索和添加 -->
      <el-row :gutter="20">
        <el-col :span="10"
          ><div class="grid-content bg-purple">
            <el-input placeholder="请输入内容" class="input-with-select">
              <el-button slot="append" icon="el-icon-search"></el-button>
            </el-input></div
        ></el-col>
        <el-col :span="6"
          ><div class="grid-content bg-purple">
            <el-button type="success" @click="addUser">添加用户</el-button>
          </div></el-col
        >
      </el-row>
      <!-- 添加用户弹框 -->
      <add-user ref="addUserRef" @getUserList="getUserList"></add-user>

      <!-- 表格区域 -->
      <el-table :data="tableData" border style="width: 100%" stripe fit>
        <el-table-column label="#" type="index"></el-table-column>
        <el-table-column prop="username" label="用户名" width="100">
        </el-table-column>
        <el-table-column prop="name" label="姓名" width="100">
        </el-table-column>
        <el-table-column prop="mobile" label="电话"> </el-table-column>
        <el-table-column prop="type" label="用户类型"> </el-table-column>
        <el-table-column prop="created" label="创建时间"> </el-table-column>
        <el-table-column label="操作">
          <template slot-scope="scope">
            <el-button size="mini" @click="handleEdit(scope.$index, scope.row)"
              >编辑</el-button
            >
            <el-button
              size="mini"
              type="danger"
              @click="handleDelete(scope.$index, scope.row)"
              >删除</el-button
            >
          </template>
        </el-table-column>
      </el-table>
      <!-- 编辑用户子组件 -->
      <edit-user ref="editUserRef" :rowdata = 'rowdata' @getUserList="getUserList"></edit-user>
      <!-- 分页功能区域 -->
      <el-pagination
      @size-change="handleSizeChange"
      @current-change="handleCurrentChange"
      :current-page="pageable.pageNumber"
      :page-sizes="[5, 8, 10, 20]"
      :page-size="pageable.pageSize"
      layout="total, sizes, prev, pager, next, jumper"
      :total="totalElements">
    </el-pagination>
    </el-card>
  </div>
</template>

<script>
import { userApi, deleteUser } from 'api/userlist'
import AddUser from 'views/userlist/AddUser'
import EditUser from 'views/userlist/EditUser'

export default {
  name: 'UserList',
  data () {
    return {
      tableData: [],
      pageable: {
        // query: '',
        pageNumber: 1,
        pageSize: 5
      },
      rowdata: {},
      userList: [],
      totalElements: 0
    }
  },
  created () {
    this.getUserList()
  },
  components: {
    AddUser,
    EditUser
  },
  methods: {
    getUserList (pageable) {
      userApi(pageable)
        .then(res => this.getUserListSuccess(res))
        .catch(err => this.requestFailed(err))
    },
    getUserListSuccess (res) {
      if (res.data.code !== 0) {
        return this.$message.error('数据获取失败！')
      }
      this.tableData = res.data.data.content
      this.totalElements = res.data.data.totalElements
      // this.$message.success('获取用户列表成功！')
    },
    requestFailed () {
      this.$message.error('获取用户列表失败！')
    },
    // 编辑按钮方法
    handleEdit (index, row) {
      // console.log(row)
      this.rowdata = row
      this.$refs.editUserRef.dialogVisible = true
    },
    // 删除按钮方法
    deleteUserMethod (row) {
      console.log(row)
      deleteUser(row)
        .then(res => { this.getUserList() })
        .catch(err => {
          this.$message.error('删除出错，请重试！')
          console.log(err)
        })
    },
    handleDelete (index, row) {
      this.$confirm('此操作将永久删除, 是否继续?', '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning'
      }).then(() => {
        this.deleteUserMethod(row)
        this.$message({
          type: 'success',
          message: '删除成功!'
        })
      }).catch(() => {
        this.$message({
          type: 'info',
          message: '已取消删除'
        })
      })
    },
    // 添加用户按钮
    addUser () {
      this.$refs.addUserRef.dialogVisible = true
    },
    // 页码选择方法
    handleSizeChange (newSize) {
      this.pageable.pageSize = newSize
    },
    handleCurrentChange (newPage) {
      this.pageable.pageNumber = newPage
    }
  }
}
</script>

<style lang="less" scoped></style>
